<template>
  <div class="bg">
    <el-card class="box-card">
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="4" :offset="3">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input style="width:220px" v-model="selectCode" placeholder="请输入俱乐部名称/联系人/手机号码查询"></el-input>
        </el-col>
        <el-col :span="6">
          <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-col>

        <el-col :span="4">
          <div style="display:flex">
            <el-button type="primary" @click="searchDate">查询</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格展示 -->
    <el-card class="card">
      <div slot="header">
        <el-row type="flex" justify="space-between">
          <el-col :span="2" :offset="22">
            <el-button type="success" @click="exports">导出数据</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 表格展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="index" type="index" width="100" label="序号" align="center"></el-table-column>
        <el-table-column prop="clubName"  :show-overflow-tooltip="true" label="俱乐部名称" align="center"></el-table-column>

        <el-table-column label="俱乐部头像" align="center">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 80px" :src="scope.row.clubHeadImage"></el-image>
          </template>
        </el-table-column>

        <el-table-column prop="clubAddress"  :show-overflow-tooltip="true" label="地址" align="center"></el-table-column>
        <el-table-column prop="todaySignNumber" label="今日签到人数" align="center"></el-table-column>
        <el-table-column prop="totalSignNumber" label="累计打卡次数" align="center"></el-table-column>
        <el-table-column prop="userName"  :show-overflow-tooltip="true" label="创建者" align="center"></el-table-column>
        <el-table-column prop="userPhone" label="联系电话" align="center"></el-table-column>
        <el-table-column prop="clubCreateTime"  :show-overflow-tooltip="true" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="clubStauts" label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.clubStauts == 1 ? '有效' : '解散' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="280" align="center">
          <template slot-scope="scope">
            <el-button @click="look(scope.row)" type="primary" size="small">查看/编辑</el-button>
<!--            <el-button @click="look(scope.row)" type="primary" size="small">编辑</el-button>-->
            <el-button v-if="scope.row.clubStauts == 1" @click="jieSan(scope.row)" type="danger" size="small">解散</el-button>
            <el-button v-else @click="qiYong(scope.row)" type="danger" size="small">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          background
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :page-size="size"
          :current-page="current"
          @current-change="handleCurrentChange"
          style="margin-top:24px"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import {export2Excel} from "@/components/commom";

export default {
  name: "helperlist",
  data() {
    return {
      options: [{
        value: 1,
        label: '有效'
      }, {
        value: 2,
        label: '解散'
      }],
      value: "",
      value1: "",
      downloadLoading: false,
      tableData: [],
      merchantTotal: {}, //商家统计信息
      total: 0, //总条数
      size:10,
      current: 1, //第一页的数据加载
      selectCode: "", //查询条件
      selectCode1: "",
      firstdata: "", //开始时间
      endtime: "" //结束时间
    };
  },
  mounted() {
    this.getHelperlist()
  },
  methods: {
    //解散
    jieSan(row){
      console.log('555',row)
      this.$confirm('确认解散?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.clubStauts = 2
        this.$http.article.submitClub(row).then(res => {
          this.$message.success("修改成功")
          this.getHelperlist()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
//启用
    qiYong(row){
      this.$confirm('确认启用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.clubStauts = 1
        this.$http.article.submitClub(row).then(res => {
          this.$message.success("修改成功")
          this.getHelperlist()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },

    // 获取商户列表
    getHelperlist() {
      let param = {
        size: this.size,
        current: this.current,
        selectCode: this.selectCode,
        selectCode1: this.selectCode1,
        startDate: this.value1[0],
        endDate: this.value1[1],
        status: this.value,
      };
      this.$http.article.getClub(param).then(res => {
        this.tableData = res.result.records; //加载数据
        this.total = res.result.total; //总条数
        console.log("获取商户列表", this.tableData);

      });
    },
    // 查询功能
    searchDate() {
      this.current = 1; //模糊查询
      this.getHelperlist();
    },
    // 分页功能
    handleCurrentChange(val) {
      this.current = val;
      this.getHelperlist();
    },
    // 重置功能
    reset() {
      this.selectCode = ""; //查询条件
      this.selectCode1 = ""; //查询条件
      this.value1 = ""; //开始时间
      this.value = ""
      // 重新加载数据
      this.getHelperlist();
    },
    //查看
    look(row) {
      this.$router.push({
        path: "/home/lookClub",
        query: {
          clubId: row.clubId
        }
      });
    },
    //   导出
    exports() {
      console.log("导出");
      this.getHelperlist();
      const hader = [
        {
          title: "俱乐部名称",
          date: "clubName"
        },
        {
          title: "地址",
          date: "clubAddress"
        },
        {
          title: "今日签到人数",
          date: "todaySignNumber"
        },
        {
          title: "累计打卡次数",
          date: "totalSignNumber"
        },
        {
          title: "创建者",
          date: "userName"
        },
        {
          title: "联系电话",
          date: "userPhone"
        },
        {
          title: "创建时间",
          date: "clubCreateTime"
        } ,
        {
          title: "状态",
          date: "clubStauts"
        }
      ];

      const excelName = "俱乐部管理";

      let param = {
        size: 10,
        current: this.current,
        selectCode: this.selectCode,
        selectCode1: this.selectCode1,
        startDate: this.value1[0],
        endDate: this.value1[1],
        status: this.value,
      };
      this.$http.article.getClub(param).then(res => {
        const list = res.result.records.map(item => {
          console.log('item',item)
          //因为有枚举类型，所以这里对数据进行处理
          if (item.clubStauts) {
            item.clubStauts =
                item.clubStauts == 1 ? "有效" :  ' 解散' ;
          }
          return item;
        });
        export2Excel(hader, list, excelName);
      });
    },

  }
}
</script>

<style scoped lang="scss" scoped>
.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;

  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }

  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.clearfix {
  padding-bottom: 20px;
}

.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  padding-top: 10px;
}

.box-card {
  width: 98%;
  height: 80px;
  margin: 0 auto;
}

.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>